<template>
  <div >
    <el-menu
      class="el-menu-demo "
      mode="horizontal">
      <el-menu-item index="1">我的桌面</el-menu-item>
      <el-menu-item index="2" >消息中心</el-menu-item>
      <el-submenu index="3" v-if="username" style="float: right;" >
        <template  slot="title" style="right:20px;" >
          <span><el-avatar :src="imageUrl"></el-avatar>    ：  {{username}}</span>
        </template>
        <el-menu-item index="3-1" @click="myCenterDialog" ><i class="el-icon-user-solid"></i>个人中心</el-menu-item>
        <el-menu-item index="3-2" ><i class="el-icon-chat-dot-square"></i>消息管理</el-menu-item>
        <el-menu-item index="3-3" @click="punchCard" > <i class="el-icon-shopping-cart-2"></i>打卡</el-menu-item>
        <el-menu-item index="3-4" @click="logout" ><i class="el-icon-warning"></i>注销登录</el-menu-item>
      </el-submenu>     
      <el-submenu index="4"  style="float: right;">         
        <template slot="title">
                <el-badge :value=noticeTotal> 
                  <i class="el-icon-bell"></i>
              </el-badge>
        </template>
        <div style="width:300px;height:300px;">
          <span style="position:absolute;top:5px;left:10px;"> <i class="el-icon-chat-line-round"></i>  未读消息</span>
          <el-empty v-if="noticeTotal === 0"  :image-size="100" description="没有未读消息">
          </el-empty>
          <div v-else  style="position:absolute;top:50px;left:10px;">
            <el-descriptions v-for=" (notice, key) in noticeData " :key="key" :colon="false" @click.native="checkNoticeDetails(notice.noticeId)" direction="vertical" >
              <el-descriptions-item >{{notice.subtitle}}</el-descriptions-item>
              <el-descriptions-item>{{notice.createTime}}</el-descriptions-item>
              <el-divider></el-divider>
            </el-descriptions>
          </div>
          <el-link style="position:absolute;top:280px;left:100px;"  :underline="false" type="primary">查看更多消息 <i class="el-icon-arrow-right"></i></el-link>
        </div>
      </el-submenu>
      <el-menu-item index="6" style="float: right;color: red;" disabled >
        <NowData></NowData>
      </el-menu-item>
    </el-menu>
    <!-- 个人中心弹框 -->
    <el-dialog title="个人中心"  :visible.sync="myCenterVisible"  :close-on-click-modal="false" center  >
      <!-- <span>点击头像进行修改</span> -->
      <el-upload
        class="avatar-uploader"
        accept="image/jpg,image/jpeg,image/png"
        :action="handleImageURL()"
        :headers="myHeaders"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        style="">
        <img title="点击头像进行修改" v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <p style="text-align: center;color:red;">仅支持后缀名为.jpg、.ipeg、.png类型的图片</p>
      <el-divider></el-divider>
        <el-form ref="userinfo" :model="userinfo"  center>
          <el-form-item label="客户名称:" label-width="120px" >
            <el-input v-model="username" ></el-input>
          </el-form-item>
          <!-- <el-form-item label="客户邮箱:" label-width="140px" >
            <el-input disabled v-model="cheakCustomerData.contractEmail"></el-input>
          </el-form-item>
          <el-form-item label="客户电话:" label-width="140px" >
            <el-input disabled v-model="cheakCustomerData.contractTelephone"></el-input>
          </el-form-item>
          <el-form-item label="客户住址:" label-width="140px" >
            <el-input disabled v-model="cheakCustomerData.customerAddress"></el-input>
          </el-form-item>      
          <el-form-item label="客户类型:" label-width="140px">
            <el-select disabled  v-model="cheakCustomerData.customerType" >
              <el-option label="正式客户" :value="1"></el-option>
              <el-option label="测试客户" :value="2"></el-option>
            </el-select>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="myCenterVisible = false">取 消</el-button>
          <el-button size="small" type="primary" >确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import user from '../../api/user'
import notice from '../../api/notice'
import attendance from '../../api/attendance.js';
import store from '../../store'
import NowData from "../data/index";
import bus from '../../api/eventBus'
import { getToken,getUserId,setHeadImg } from '../../utils/auth'
export default {
  name: "handerbar",
  components:{ NowData },
  data(){
    return{
      myCenterVisible: false,
      //获取用户以前的头像
      imageUrl: store.getters.headImg,

      //个人信息
      username:store.getters.username,
      //设置上传请求头
      userinfo:'',
      myHeaders:{"Authorization": store.getters.token},
      //查看用户未读消息
      searchFrom:{
        pageNum:1,
        pageSize:10,
        userId:store.getters.userId
      },
      noticeData:{},
      noticeTotal:'',
      addAttendanceFrom:{

      }
    }
  },
  mounted(){
    //在mounted 声明周期中创建定时器
    const timer = setInterval(()=>{
      // 这里调用调用需要执行的方法，1为自定义的参数，由于特殊的需求它将用来区分，定时器调用和手工调用，然后执行不同的业务逻辑
      this.getNoticeList();
    }, 30000) // 每两秒执行1次
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除
    this.$once('hook:beforeDestroy',()=>{
      // 在页面销毁时，销毁定时器
      clearInterval(timer)
    })
  },
  created(){
    this.getNoticeList();
  },
  methods:{
    //注销登录
    logout(){
      this.$confirm("您确定退出登录么","提示",{
        confirmButtonText:'确定',
        cancelButtonText:'取消'
      }).then(()=>{
        user.logout()
          .then(res =>{
              this.$store.dispatch('user/logout').then(() => {
                this.$router.push('/index/home')

            })
        })

      })
    },
    //打卡
    punchCard(){
      var current = this.$moment().format('YYYY-MM-DD HH:mm:ss')
      this.$confirm("当前打卡时间为"+current+"，您确定打卡么","提示",{
        confirmButtonText:'确定',
        cancelButtonText:'取消'
      }).then(()=>{
        this.addAttendanceFrom.startTime = current
        attendance.saveAttendance(this.addAttendanceFrom)
          .then(res => {
            if(res.data.code === '000'){
              this.$message.success("上班打卡")
            }else if(res.data.code === '999'){
              this.$message.warning(res.data.msg)
            }
          })
      }).catch(

      )
    },       
    //个人中心弹出框
    myCenterDialog(){
      this.myCenterVisible=true
    },
    //判断上传图片格式

    beforeAvatarUpload(file) {//文件上传之前调用做一些拦截限制
      const isJPG = true;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    handleAvatarSuccess(res, file) {//图片上传成功
    if(res.code === '000'){
      this.$message.success('头像修改成功');
      this.imageUrl=res.data
      setHeadImg(res.data);
      //并且刷新vuex的值
      //临时url，方便预览对象
      // this.imageUrl = URL.createObjectURL(file.raw);
    }else if(res.code === '403'){
      this.$message.error('头像修改失败,当前操作没有得到授权');
    }

    },
    //动态获取上传地址
    handleImageURL(){
      return "/api/management-center/user/uploader"
    },
    // 获取头像
    // handleImage(){
    //   user.handleImage({username:store.getters.username})
    //     .then( res => {
    //       this.imageUrl=res.data.data
    //     })
      
    // },
    //查询用户未读消息
    async getNoticeList(){
      const res = await notice.getNoticeList(this.searchFrom); 
      this.noticeData = res.data.data.records;
      this.noticeTotal = res.data.data.total;
    },
    //查看消息详情
    checkNoticeDetails(noticeId){
      console.log(noticeId);
      this.$router.replace('/notice/noticeDetails')
      setTimeout( () =>{
          bus.$emit("noticeId",noticeId);
      },20)
    }
  }
}
</script>

<style>
  .el-submenu__title{
    padding: 0 40px;
  }


  .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 65px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: 290px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    line-height: 128px;
    text-align: center;
  }
  .avatar {
    width: 128px;
    height: 128px;
    display: block;
  }

.el-menu-item {
    font-size: 16px ;
}

.el-submenu [class^=el-icon-] {
  font-size: 25px;
}

.el-badge__content.is-fixed {
  top: 20px;
  right: 15px;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
